<!--main.vue 项目主页面 包含tab页面  主信息流 main.index.vue 通讯录 main.contact.vue 消息流 main.msg.vue  设置 main.setting.vue -->
<!--https://vuefe.cn/v2/guide/components.html#动态组件-->
<!-- md -->
<template>
  <div class="main">
  <div  id="id_main_header">
    <mu-appbar  :title="bottomName[this.$store.state.main.focusIndex]">
      <mu-icon-button icon="menu" slot="left" @click="handeMenu"/>
      <mu-icon-button :icon="searchButton[this.$store.state.main.focusIndex]" slot="right" @click="handeSearch"/>
    </mu-appbar>
  </div>
    <div  id="id_main_container">
      <keep-alive>
        <component :is="this.$store.state.main.focusIndex">
          <!-- 非活动组件将被缓存！ -->
        </component>
      </keep-alive>
    </div>

    <div id="id_main_bottom">
          <mu-bottom-nav id="id_bottom" :value="this.$store.getters.getFocusIndex"  @change="handleChange">
            <mu-bottom-nav-item value="main-index" :title="bottomName['main-index']" icon="home"/>
            <mu-bottom-nav-item value="main-contact" :title="bottomName['main-contact']" icon="contacts"/>
            <mu-bottom-nav-item value="main-msg" :title="bottomName['main-msg']" icon="message"/>
            <mu-bottom-nav-item value="main-face" :title="bottomName['main-face']" icon="face"/>
        </mu-bottom-nav>
    </div>

  </div>
</template>

<script>
import MainIndex from '@/components/modules/main/main.index';
import MainContact from '@/components/modules/main/main.contact';
import MainMsg from '@/components/modules/main/main.msg';
import MainFace from '@/components/modules/main/main.face';

export default {
  name: 'main',
  data() {
    return {
      bottomName: {
        'main-index': '首页',
        'main-contact': '通讯录',
        'main-msg': '消息',
        'main-face': '个人',
      },
      searchButton: {
        'main-index': 'search',
        'main-contact': 'add',
        'main-msg': '',
        'main-face': '',
      },
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  updated() {
    console.log('updated');
  },
  destroyed() {
    console.log('destroyed');
  },
  components: {
    'main-index': MainIndex,
    'main-contact': MainContact,
    'main-msg': MainMsg,
    'main-face': MainFace,
  },
  methods: {
    handeMenu() {
      this.$router.push('/video');
    },
    handeSearch() {
      if (this.searchButton[this.$store.state.main.focusIndex] === 'search') {
        this.$router.push('/search');
      } else if (this.searchButton[this.$store.state.main.focusIndex] === 'add') {
        this.$router.push('/create.contact');
      }
    },
    handleChange(val) {
      //  this.bottomNav = val;
      this.$store.commit('focusIndex', {
        focusIndex: val,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

/**
    justify-content: center;
    align-items: center;
 */
 .main{
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    display: flex;
    position: relative;
    flex-direction: column;
    flex-wrap:nowrap;
  }


 #id_main_container{
    flex: 1;
    overflow-y:scroll;
  }

 #id_main_bottom{
    flex: 0;
  }

 #id_main_header{
   flex: 0;
  }


</style>
